<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改支付密码')"/>
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
	<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script th:src="@{/ajax/libs/layui/layui.js}"></script>
    <script th:src="@{/js/qrcode.min.js}"></script>
</head>
<body class="white-bg">
<div>
    <div id="qrcode" style="margin-left: 40vw">
    </div>
    <div style="font-size: 19px;text-align: center">
		<div>1、请前往appstore【苹果】或各大应用市场【安卓】搜索Google Authenticator
		</div>
        <div>2、扫描上方二维码，扫描成功后请点击下方按钮</div>
    </div>
	<div style="text-align: center;font-size: 19px">
		<button type="button" class="btn btn-sm btn-primary" onclick="bindGoogle()"><i class="fa fa-check"></i>扫码成功，请点击这里完成绑定</button>&nbsp;
	</div>
</div>
<script th:inline="javascript">
	var ctx = [[@{/}]];
</script>
<script>
    var googleAuthQRCodeData = '[[${googleAuthQRCodeData}]]'.replace("&amp;","&");
    var secretKey = '[[${secretKey}]]';
    var qrcode = new QRCode(document.getElementById("qrcode"));
    qrcode.makeCode(googleAuthQRCodeData);
    $('#qrcode img').removeAttr('alt')

    function bindGoogle() {
		layer.open({
			title: '请输入谷歌验证器上的验证码'
			,content: '<div style="color: black;"><label>请输入验证码:&nbsp;&nbsp;</label><input id="googleCode" type="text" placeholder="请输入验证码" style="width: 200px"></div>\n',
			btn: ['确定', '取消'],
			btn1: function(index, layero){
				var val = $('#googleCode').val();
				if(val.trim()===''){
					alert('请输入验证码');
					return false;
				}
				$.ajax({
					type: "post",
					url: ctx + "system/user/bindGoogle",
					data: {
						secretKey: secretKey,
						code: val
					},
					success: function (r) {
						if(r.code == 0){
							location.reload();
						}
						layer.msg(r.msg);
					}
				});
			},
			btn2: function(index, layero){
			}
		});

    }
</script>
</body>

</html>
